{include file="admin@public/header" /}

<style>
	#matchCon {
		width: 120px;
	}

	.ui-jqgrid-bdiv .textbox {
		height: 100%;
	}

	.ui-jqgrid tr.ui-row-ltr td {
		position: relative;
	}

	.number_sku {
		padding: 13px 13px 0 0;
		position: absolute;
		left: 10px;
		top: 13px;
	}

	.expand-operate {
		position: absolute;
		left: 8px;
		top: 3px;
	}

	.add {
		background: #fff url("/public/static/admin/css/img/number_sku.png") no-repeat
	}

	.plus {
		background: #fff url("/public/static/admin/css/img/number_sku.png") no-repeat 0 -13px
	}

	.number_sku.plus {
		top: 4px;
	}

	.combineOrNot {
		display: none;
	}

	.pl25 {
		padding-left: 25px !important;
	}

	td[aria-describedby=grid_goods] {
		position: relative;
	}

	.ui-expand-show {
		background: url("/public/static/admin/css/img/number_sku_active.png") no-repeat;
		display: inline-block;
		width: 13px;
		height: 13px;
	}

	.ui-expand-hide {
		background: url("/public/static/admin/css/img/number_sku_active.png") no-repeat 0 -13px;
		display: inline-block;
		width: 13px;
		height: 13px;
	}
	.ui-jqgrid .ui-jqgrid-bdiv .line{margin: 3px -5px;}
</style>

<div class="container" style="margin:20px;">
	<div class="mod-search m0 cf">
		<ul class="ul-inline">
			<li>
				<label>模板名称:</label>
				<input type="text" id="matchCon" class="ui-input ui-input-ph">
			</li>
			<li>
				<label>组合件:</label>
				<input type="text" id="group" class="ui-input" />
			</li>
			<li>
				<label>子件包含:</label>
				<input type="text" id="children" class="ui-input" />
			</li>
			<li><a class="ui-btn" id="search">查询</a></li>
		</ul>
	</div>
	<div class="grid-wrap">
		<table id="grid">
		</table>
		<div id="page"></div>
	</div>
	<input type="hidden" id="templateID">
</div>


<script type="text/javascript">


	$(document).ready(function () {
		$("#grid").jqGrid({
			url: '/store/assembly/template.html?ajax=100',
			datatype: "json",//数据来源，本地数据（local，json,jsonp,xml等）
			height: '300px',//高度，表格高度。可为数值、百分比或'auto'
			colNames: ["id", "操作", "模板名称", "组合件", "组合件数量", '<span id="expandOperate" title="一键展开" class="expand-operate ui-expand-show" onclick="showHideAll()"></span>子件', "子件数量"],
			colModel: [
				{ name: 'id', hidden: true },
				{ name: '', index: 'id', width: 30, label: "操作", align: "center", formatter: cLink },
				{ name: 'name', width: 150, label: "模板名称" },
				{ name: 'templateName', width: 160, label: "组合件" },
				{ name: 'number', width: 70, label: "组合件数量" },
				{ name: '', width: 180, label: "子件", formatter: childThing },
				{ name: '', width: 60, label: "子件数量", formatter: childNum },
			],

			cellEdit: true,
			cellurl: '/',
			sortable: true,  //排序

			rowNum: 100,
			rowList: [100, 200, 500],
			sortname: 'id',
			sortorder: "desc",
			pagerpos: "left",//分页位置

			pgbuttons: true,//翻页按钮
			rownumbers: true, //自增序号
			pagination: true,
			altRows: !0,
			gridview: !0,
			shrinkToFit: !1,
			cellLayout: 8,
			autowidth: !0,
			pager: "#page",
			viewrecords: !0,
			cmTemplate: {
				sortable: !1,
				title: !1
			},
			loadError: function (t, e, i) {
				parent.Public.tips({
					type: 1,
					content: "操作失败了哦，请检查您的网络链接！"
				})
			},
			onCellSelect: function (rowid) {
				var rowDatas = $("#grid").jqGrid('getRowData', rowid);
				var rowss = rowDatas["id"];
				$('#templateID').val(rowss);
			}
		});
	});

	// 操作按钮
	function cLink(cellvalue, options, rowObject) {
		return '<div class="operating"><span class="ui-icon ui-icon-trash" onclick="del(' + rowObject.id + ')" title="删除"></span></div>'
	}
	// 子件名称
	function childThing(cellvalue, options, rowObject) {
		var html = '<div id="childThing' + rowObject.id + '">\
			<p class="combineHeight pl25">'+ rowObject.sonName[0] + '</p>\
			<span class="number_sku add" id="number_sku' + rowObject.id + '" onclick="showHide(' + rowObject.id + ')"></span>';
		for (let i = 1; i < rowObject.sonName.length; i++) {
			const element = rowObject.sonName[i];
			html += '<p class="line combineOrNot" style="display: none;"></p><p class="combineOrNot combineHeight pl25" style="display: none;">' + element + '</p>';
		}
		html += '</div >';
		return html;
	}
	// 子件数量
	function childNum(cellvalue, options, rowObject) {
		var html = '<div id="childNum' + rowObject.id + '"><p class="combineHeight pl25">' + rowObject.sonNum[0] + '</p>'
		for (let i = 1; i < rowObject.sonNum.length; i++) {
			const element = rowObject.sonNum[i];
			html += '<p class="line combineOrNot" style="display: none;"></p><p class="combineOrNot combineHeight pl25" style="display: none;">' + element + '</p>';
		}
		html += '</div >';
		return html;
	}

	// 列表点击显示隐藏
	function showHide(rid) {
		console.log(rid);

		var open = $("#number_sku" + rid).hasClass("plus");
		// 判断是否展开子件详情
		if (open) {
			// 改变图标
			$("#number_sku" + rid).addClass("add").removeClass("plus");
			// 隐藏子件
			$("#childThing" + rid).find(".combineOrNot").hide();
			// 隐藏子件数量
			$("#childNum" + rid).find(".combineOrNot").hide();
		} else {
			$("#number_sku" + rid).addClass("plus").removeClass("add");
			$("#childThing" + rid).find(".combineOrNot").show();
			$("#childNum" + rid).find(".combineOrNot").show();
		}
	}
	// 表头点击显示隐藏
	function showHideAll() {
		var open = $("#expandOperate").hasClass("ui-expand-hide");
		if (open) {
			$("#expandOperate").addClass("ui-expand-show").removeClass("ui-expand-hide");
			$("#expandOperate").attr("title", "一键展开");
			$(".combineOrNot").hide();
			$(".number_sku").addClass("add").removeClass("plus");
		} else {
			$("#expandOperate").addClass("ui-expand-hide").removeClass("ui-expand-show");
			$("#expandOperate").attr("title", "一键收缩");
			$(".combineOrNot").show();
			$(".number_sku").addClass("plus").removeClass("add");
		}
	}
</script>

{include file="admin@public/footer" /}